<template>
	<el-dialog
		title="修改密码"
		v-if="visible"
		:visible.sync="visible"
		width="400px"
		:before-close="hide"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:destroy-on-close="true"
		:lock-scroll="false"
		append-to-body
	>
		<div class="min-body-height">
			<el-form :model="info" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item class="lableName" label="输入原密码" prop="oldPwd">
					<el-input type="password" v-model="info.oldPwd" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item class="lableName" label="输入新密码" prop="newPwd">
					<el-input type="password" v-model="info.newPwd" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item class="lableName" label="输入新密码" prop="newPassword2">
					<el-input type="password" v-model="info.newPassword2" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<!--zp 增加了业务参数-->
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="hide">取 消</el-button>
			<el-button size="small" :loading="loading" type="primary" @click="okclick">确 定</el-button>
		</div>
	</el-dialog>
	<!-- <div class="maskCenter">
    <div :class="visible?'systemDialog':'systemDialog-hide'"
      style="height:288px;width:380px;line-height:initial;" 
    >
      <div class="dialog-header" v-movew>
        <span>修改密码</span>
        <el-tooltip class="item" effect="dark" content="关闭" placement="top-start">
          <span class="icon iconfont iconbiaoqianlan-guanbi close" @click="hide"></span>
        </el-tooltip>
      </div>
      <div class="dialog-body">
        <el-form :model="info" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				  <el-form-item class="lableName" label="输入原密码" prop="oldPwd">
				    <el-input type="password" v-model="info.oldPwd" autocomplete="off"></el-input>
				  </el-form-item>
				  <el-form-item class="lableName" label="输入新密码" prop="newPwd">
				    <el-input type="password" v-model="info.newPwd" autocomplete="off"></el-input>
				  </el-form-item>
				  <el-form-item class="lableName" label="输入新密码" prop="newPassword2">
				    <el-input type="password" v-model="info.newPassword2" autocomplete="off"></el-input>
				  </el-form-item>				  
				</el-form>
        <div class="dialog-footer right">
        	<span class="systemButtonConfirm" @click="okclick">确认</span>
        	<span class="systemButtonConfirm" @click="hide">取消</span>
      	</div>
      </div>      
    </div>
  </div> -->
</template>

<script>
	import movew from '@/directives/winmove'
	import { changePassword } from '@/system/api/login.js'
	import { deepCopy } from '@/utils/public'
	import { encrypt } from '@/utils/jsencrypt'
	export default {
		// directives: { movew },
		name: 'winPassWord',
		props: {
			show: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.info.newPwd) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
			}
			return {
				visible: true,
				info: {
					oldPwd: null,
					newPwd: null,
					newPassword2: null,
				},
				loading: false,
				rules: {
					oldPwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
					newPwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
					newPassword2: [{ required: true, validator: validatePass2, trigger: 'blur' }],
				},
			}
		},
		watch: {
			show: {
				immediate: true,
				handler: function(newValue, oldValue) {
					this.visible = newValue
				},
			},
		},
		mounted() {},
		methods: {
			hide() {
				this.$emit('update:show', false)
			},
			changePassword() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						this.loading = true
						let param = {}
						this.$set(param, 'oldPwd', encrypt(this.info.oldPwd))
						this.$set(param, 'newPwd', encrypt(this.info.newPwd))
						this.$set(param, 'newPassword2', encrypt(this.info.newPassword2))
						changePassword(param).then(res => {
							this.loading = true
							if (res.success) {
								this.$emit('update:show', false)
							} else {
								this.message(res.msg, 3)
							}
						})
					}
				})
			},
			okclick() {
				this.changePassword()
			},
		},
	}
</script>
